/**
 * PasswordInput Component Style for tingle
 * @author 
 *
 * Copyright 2014-2016, Tingle Team.
 * All rights reserved.
 */

$password-input-min-height = 46px
$password-input-icon-margin = 16px
$password-input-decrypted-letter-spacing = 4px
$password-input-normal-letter-spacing = 0px

.{$prefix}-password-input
    min-height $password-input-min-height
    width 100%
    padding 0 16px

.{$prefix}-password-input-core
    width 100%
    position relative

.{$prefix}-password-input-text
    padding 0
    border none
    outline none
    color $text-primary
    width 100%
    font-size $font-size-field-text
    line-height $font-size-field-text-lh
    letter-spacing $password-input-normal-letter-spacing
    background-color transparent
    z-index 2
    position relative

.{$prefix}-password-input-text-decrypted
    font-family caption
    // font-size 20px
    letter-spacing $password-input-decrypted-letter-spacing

.{$prefix}-password-input-placeholder
    position absolute
    left 0
    top 0
    max-width 100%
    height $font-size-field-text-lh
    line-height $font-size-field-text-lh
    color $text-placeholder
    z-index 0

.{$prefix}-password-input-left-icon
    line-height 0
    margin-right $password-input-icon-margin

.{$prefix}-password-input-right-icon
    line-height 0
    margin-left $password-input-icon-margin

.{$prefix}-password-input svg
  fill $normal-alpha-3

